@charset "utf-8";
*{
    margin: 0px;
    padding: 0px;
}
/*添加背景*/
body{
    background:url(../imgs/bgg.jpg) ;
    background-size:2048px  956px ;
}
/*图片*/
div{
    width: 300px;
    height: 300px;
    border: 0px solid black;
    background-image: url("../imgs/peo1.gif");
    background-size: 300px 300px;
    /*定位属性*/
    position: relative;
    top:380px;
    left:100px;
    /*动画属性  关键帧名字 过渡时间s 过渡效果*/
    animation:people 5s linear infinite;
}

/*关机帧属性*/
@keyframes people {
    0%{

        background: url(../imgs/peo1.gif) repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        opacity: .2
        top: 380px;
        left: 100px;
    }
    10%{

        background: url(../imgs/peo2.gif) repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        top: 500px;
        left: 400px;
    }
    12%{

        background: url(../imgs/peo2.gif) repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        top: 500px;
        left: 450px;
    }
    15%{

        background: url(../imgs/peo2.gif) repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        top: 500px;
        left: 500px;
    }
    18%{

        background: url(../imgs/peo2.gif) repeat;
        background-size: 300px 300px;
        transform: rotate(180deg)  scale(4);
        opacity: .2
        top: 500px;
        left: 500px;
    }
    20%{

        background: url("../imgs/peo3.gif") repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        top: 200px;
        left: 600px;
    }
    30%{

        background: url("../imgs/peo1.gif") repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        top: 900px;
        left: 600px;
    }

    40%{

        background: url("../imgs/peo1.gif") repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        top: 300px;
        left: 700px;
    }
    50%{

        background: url("../imgs/peo2.gif") repeat;
        background-size: 300px 300px;
        transform: rotate(135deg)  scale(2);
        top: 400px;
        left: 700px;
    }
    50%{

        background: url("../imgs/peo2.gif") repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        top: 400px;
        left: 800px;
    }
    60%{

        background: url("../imgs/peo1.gif") repeat;
        background-size: 300px 300px;

        transform:  scale(4);
        top: 380px;
        left: 850px;
    }
    70%{

        background: url("../imgs/peo1.gif") repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        opacity: .5
        top: 350px;
        left: 900px;
    }
    80%{

          background: url("../imgs/peo3.gif") repeat;
          background-size: 300px 300px;
          transform:   scale(3);
          top: 300px;
          left: 1000px;
      }
    90%{

        background: url("../imgs/peo3.gif") repeat;
        background-size: 300px 300px;
        transform:   scale(3);
        top: 200px;
        left: 1200px;
    }
    100%{

        background: url("../imgs/peo3.gif") repeat;
        background-size: 300px 300px;
        transform:   scale(1);

        top: 100px;
        left: 1500px;
    }
}